<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include  file="init.jsp"%>
<script src="${resources}/plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="${resources}/plugins/jquery-validation/messages_zh.min.js"></script>
<link rel="stylesheet" type="text/css" href="${resources}/css/center.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册</title> 



    <style>
        .easebuy-m .smt {
            font-size: 14px;
            min-height: 300px;
            height: auto;
        }

        .mt .title {
            font-size: 16px;
            font-weight: 900;
            padding: 10px;
            border-left: 3px solid #FF6666;
        }

        #edit-cont .item .label {
            float: none;
            display: block;
            vertical-align: middle;
            color: #999;
            text-align: left;
        }

        .item span.label {
            height: 30px;
            line-height: 18px;
            padding: 6px 0;
            width: 100px;
        }

        #edit-cont .item .error-msg {
            color: #c00;
            line-height: 32px;
        }

        #edit-cont .item .text {
            height: 30px;
            line-height: 18px;
            padding: 6px;
            width: 220px;
            margin-right: 5px;
            vertical-align: middle;
            border: 1px solid #ccc;
        }

        #edit-cont .item .text1 {
            width: 484px;
        }

        #edit-cont em {
            padding-right: 5px;
            color: #e4393c;
        }

        #edit-cont .item .sele {
            width: auto;
            margin-right: 10px;
            line-height: 18px;
            border: 1px solid #ccc;
            padding: 5px;
            float: none;
        }

        .form_group {

        }

        .form_item {
            width: 600px;
            margin: auto;
            height: 60px;
        }

        .form_group .form_item label {
            float: left;
            width: 150px;
            text-align: right;
            padding: 0px 20px;
            height: 50px;
            line-height: 50px;
            color: #333;
        }

        .form_group .form_item p {
            float: left;
            height: 50px;
            line-height: 50px;
            font-size: 12px;
            color: #c40000 !important;

        }

        .form_group .form_item span {
            padding: 5px;
            color: #c40000 !important;
            font-weight: 900;
        }

        .form_group .form_item .tex_input {
            float: left;
            width: 200px;
            height: 40px;
            margin: 5px 10px;
            padding: 0px 10px;
            text-align: left;
            border-radius: 5px;
            border: 1px solid #CCC;
            font-size: 16px;
        }

        .form_group .form_item .tex_code {
            float: left;
            width: 90px;
            height: 40px;
            margin: 5px 10px;
            padding: 0px 10px;
            text-align: left;
            border-radius: 5px;
            border: 1px solid #CCC;
            font-size: 16px;
        }

        .form_group .form_item .btn_code {
            float: left;
            width: 95px;
            height: 40px;
            margin: 5px;
            padding: 11px 5px;
            text-align: center;
            border-radius: 34px;
            border: none;
            color: #FFF;
            background: #FF9900;
        }

        .form_group .form_item .btn_submit {
            width: 240px;
            height: 44px;
            text-align: center;
            margin: auto;
            background: #0099cc;
            border: none;
            color: #FFF;
            font-size: 16px;
            font-weight: 900;
            border-radius: 30px;
        }

        .form_group .form_item .message_error {
            float: left;
            width: 200px;
            height: 40px;
            line-height: 40px;
            padding: 0px 10px;
            color: #c40000 !important;
        }

        .form_group .form_item .message_error span {
            padding-left: 10px;
        }

        .form_title {
            height: 55px;
            line-height: 50px;
            padding: 10px 0px;
            font-size: 16px;
            font-weight: 700;
            border-bottom: 2px solid #CCC;
            color: #666;
            margin-bottom: 20px;
        }

        .form_title span {
            border-left: 3px solid #FF6666;
            padding-left: 20px;
            color: #333;
            font-size: 18px;
        }


    </style>
</head>
<body>
<%@ include file="header_1.jsp" %>
<%-- <nav class="navbar navbar-default navbar-static-top navbar-shortcut">
    <div class="container">
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right navbar-nav-jd">
                <li>
                    <a href="${path}/login">[登录]</a>
                </li> 
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>
<!--- 导航： begin -->
<div id="nav">
    <div class="w container">
        <!-- logo begin -->
        <div class="logo">
            <a href="${path}" class="fore1"></a>
            <a href="${path}" class="fore2">我的淘惠帮</a>
            <a href="${path}" class="fore3">返回淘惠帮</a>
        </div>
        <!-- logo end -->

        <div class="pull-right">
            <form class="navbar-form navbar-left navbar-form-jd" role="search" action="/shop-pc/goods/search">
                <div class="form-group">
                    <input type="text" class="form-control" name="search_CN_title" placeholder="水果">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
                <a href="/shop-pc/cart" class="btn btn-default">购物车</a>
            </form>

        </div>
    </div>
</div> --%>
<!--- 导航： end -->

<!-- container begin -->
<div id="container">
    <div class="w">
        <div id="content">

            <div style="width:100%;min-height:500px;background:#eee;padding:20px;">
                <div style="width:100%;min-height:300px;">
                     <form class="form-horizontal"  id="validation-form">
							<h6 class="form_title"><span>注册 </span></h6>
							<div class="form_group">
								<div class="form_item">
									<label><span>*</span>会员账号</label>
									<input id="username"  name="username" class="tex_input" value="" />
								</div>
	
								<div class="form_item">
									<label ><span>*</span>密码</label>
									<input id="password"  name="password" type="password" class="tex_input" value="" />
								</div>
	
								<div class="form_item">
									<label ><span>*</span>确认密码</label>
									<input id="confirm_password" name="confirm_password" type="password" class="tex_input" value="" />
								</div>
	
								<div class="form_item">
									<label ><span>*</span>验证码</label> 
									<input class="tex_code" id="random"  name="random" value="" />
									<div class="btn_code">获取验证码</div>
								</div>
	
								<div class="form_item" style="text-align:center">
									<button id="regBtn" class="btn_submit">注册</button>
								</div>
							</div>
						</form>
 </div>


            </div>
            <span class="clr"></span>
        </div>
    </div>
</div>
<!-- container end -->

 <%@ include  file="footer.jsp"%>
</body>

<script type="text/javascript">
$(function(){
	
	
	
	$('#validation-form').validate({
		errorElement: 'div',
		errorClass: 'message_error',
		focusInvalid: false,
		rules: {
			username: "required",
			password: {
				required: true,
				minlength: 6
			},
			confirm_password: {
		    	required: true,
				equalTo: "#password"
		   },
		   random:{
		   		required: true 
		   }
		},
		messages: {
			
		   username: "<span>*</span>请输入手机号码",
			
		   password: {
				required: "<span>*</span>请输入密码",
				minlength: "<span>*</span>密码不能少于6个字"
		   },
		   confirm_password: {
				required: "<span>*</span>请确认密码",
				equalTo: "<span>*</span>两次输入密码不一致"
		   },
		   random: {
				required: "<span>*</span>请输入验证码",
				minlength: "<span>*</span>验证码不正确",
				equalTo: "<span>*</span>验证码不正确"
		   }
		},


		highlight: function (e) {
			$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
		},

		success: function (e) {
			$(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
			$(e).remove();
		},

		errorPlacement: function (error, element) {
			if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
				var controls = element.closest('div[class*="col-"]');
				if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
				else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
			}
			else if(element.is('.select2')) {
				error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
			}
			else if(element.is('.chosen-select')) {
				error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
			}
			
			else error.appendTo(element.parent());
		},

		submitHandler: function (form) {
			//屏蔽插件提交,使用页面ajax提交	
			//form.submit();
		},
		invalidHandler: function (form) {
		}
	}); 
	
    //点击获取验证码
  $(".btn_code").click(function(){
	  var tel = $('#username').val();
	  if(validation(tel)){
			//获取验证码
			getCode(tel);
			//启动计时器
			timeOut();
		}else{
			alertSuccess('请输入正确的手机号码');
		}
		
	  
  });
    
    /* 获取验证码 */
   function getCode(tel){ 
	    var url = "${path}/message/verifycode";
		$.post(url,{"username":tel},function(data){
			alertSuccess(data.msg);  
		});   
	   
   }
    
    
   /* ---------------- 计时器 ---------------- */
	var count = 60;
	var timmer;
	function timeOut(){
		count--;
		if(count > 0){
			$('.btn_code').attr("disabled","disabled")
			$('.btn_code').text('('+count+')重新获取');
			timmer = setTimeout(timeOut, 1000);
		}else{
			count = 60;
			clearTimeout(timmer);
			$('.btn_code').removeAttr("disabled");
			$('.btn_code').text("获取验证码");
		}
	}
    
    
  /* ---------------- 验证用户名为手机号 ---------------- */
	function validation(tel){
	  reg=/^1[3|4|5|7|8]\d{9}$/;
	  return reg.test(tel);
	}
  
  
  
     /* 点击注册 */
     $("#regBtn").click(function(){
    	 
    	 var tel = $('#username').val();
   	    if(validation(tel)){
   			 
   		}else{
   			alertSuccess('请输入正确的手机号码');
   			return;
   		}
    	 
    	 if($('#validation-form').valid()){
    		
    		 $.ajax({
					type:"post",
					url:"${path}/reg",
					data:$("#validation-form").serialize(),
					success:function(result){
						if(result.code==200){
							alertSuccess("注册成功");
							window.location.href="${path}/";
						}else{ 
							 _letsun_show_msg("red",result.msg,3000);
						}
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						_letsun_show_msg("red","网络异常",3000);
	               	}
	            })
    	 }
    	 
     });
     
  
});
</script>

</html>
